<template>
    <n-layout content-class="h-full flex flex-col"
              :native-scrollbar="false">

        <!--工作空间-->
        <n-space vertical :class="{'overflow-hidden':'overflow-hidden', 'h-6':isShrink}">
            <!--工作空间标题-->
            <n-text>
                <n-text class="font-bold">工作空间</n-text>
                <n-divider vertical/>
                <n-text tag="q" depth="3">可以记录你所有的实验配置及步骤, 便于复用</n-text>
            </n-text>
            <div class="flex gap-3">
                <n-button class="h-28 w-28" v-for="work in works">
                    <n-ellipsis class="max-w-28">
                        <n-text>{{ work.name }}</n-text>
                    </n-ellipsis>

                </n-button>
                <!--新建工作空间-->
                <n-button class="h-28 w-28" :dashed="true">
                    <template #icon>
                        <Add20Regular/>
                    </template>
                </n-button>
            </div>
        </n-space>
        <n-divider class="m-0">
            <n-button
                    :bordered="false"
                    secondary
                    @click="toggleRotate"
                    :class="{ 'rotate-180': isRotated,
                    'transition': 'transition',
                    'bg-transparent':'bg-transparent'
                    }"

            >
                <n-icon :component="ChevronUp" class="text-2xl"></n-icon>
            </n-button>
        </n-divider>

        <!--工作台-->
        <n-space class="h-10">
            <!--工作台标题-->
            <n-text>
                <n-text class="font-bold">工作台</n-text>
                <n-divider vertical/>
                <n-text tag="q" depth="3">快速构建一个实验条件</n-text>
            </n-text>
            <!--连接状态-->
            <n-text class="flex items-center" v-if="selectedDevice">
                <n-spin size="tiny"/>
                正在与
                <n-text tag="" type="success">{{ selectedDevice?.name }}</n-text>
                建立连接...
            </n-text>
        </n-space>
        <n-space class="m-0">
            <TcBox :list_="a"/>
        </n-space>

    </n-layout>

</template>

<script setup>
import {ref, onMounted, getCurrentInstance, computed, reactive} from "vue";
import {useRoute, useRouter} from 'vue-router'
import {Add20Regular} from '@vicons/fluent'
import {ChevronUp} from "@vicons/carbon"
import TcBox from "@/views/TestCase/components/TcBox.vue";

const isRotated = ref(false);
const isShrink = ref(false)
const toggleRotate = () => {
    isRotated.value = !isRotated.value;
    isShrink.value = !isShrink.value
};

const route = useRoute()
const router = useRouter()
const works = ref([
    {
        name: "预置工作台",
        modifyDT: "2024.10.25",
        createDT: "2024.10.24",
        // 和工作有关的配置
        detail: {}
    },
    {
        name: "热实验1",
        modifyDT: "2024.10.25",
        createDT: "2024.10.24",
        // 和工作有关的配置
        detail: {}
    },
    {
        name: "光学头测试1",
        modifyDT: "2024.10.25",
        createDT: "2024.10.24",
        // 和工作有关的配置
        detail: {}
    },
])

// const testcaseList = ref([
//     {
//         name: "用例1",
//         instructionList: [
//             {name: "自主参数建链"},
//             {name: "FSM精跟扫描"},
//             {name: "相机曝光调节"}
//         ]
//     },
//     {
//         name: "用例2",
//         instructionList: [
//             {name: "电机启动"},
//             {name: "电机位置选择"},
//             {name: "电机跟踪旋转"}
//         ]
//     },
// ])
const a = ref(
    []
)

const {emitter} = getCurrentInstance()?.proxy;
const deviceList = ref(null)
const selectedDevice = ref(null)
emitter.on('deviceList', (res) => {
    deviceList.value = res.value
    connDev()
})

const connDev = () => {
    // 发起建立连接的请求
    deviceList.value.forEach((value) => {
        if (value.name === route.query.dev) {
            // 改变状态提示信息
            value.detail = "连接中"
        }
    })
    setTimeout(() => {
        router.replace("/working")
    }, 500)

    // 假设这里有一个方法来修改选中设备的状态
    // 模拟1秒连接成功后跳转
    // setTimeout(() => {
    //
    // }, 1000)
    // router.replace("/working")


}
onMounted(() => {
})
const newWork = () => {
    // 新建工作空间
}
</script>
<style scoped>
:deep(.n-button__content) {
    display: block
}

.rotate-180 {
    transform: rotate(180deg) !important;
}
</style>
